<template>
  <div style="padding: 10px;">
    <add-shortcut v-if="isAddShortcut"
                  :data="data"
                  @save="saveShortcutContent"
                  @cancel="isAddShortcut = false">
    </add-shortcut>
    <div v-if="shortcutData" style="max-height: 60vh;overflow: auto">
      <div v-for="(value,key) in shortcutData" :key="key" class="shortcut-item">
        <div class="shortcut-item-top">
          <!-- 标题 -->
          <h4>{{ key }}</h4>
          <!-- 新增内容 -->
          <div @click="isAddShortcut = true;data = {type: key,name: '',path: '',icon: ''}">
            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#000000">
              <path
                  d="M128 64a64 64 0 0 0-64 64v768a64 64 0 0 0 64 64h768a64 64 0 0 0 64-64V128a64 64 0 0 0-64-64H128z m0-64h768a128 128 0 0 1 128 128v768a128 128 0 0 1-128 128H128a128 128 0 0 1-128-128V128a128 128 0 0 1 128-128z"></path>
              <path d="M704 480a32 32 0 1 1 0 64H320a32 32 0 0 1 0-64h384z"></path>
              <path d="M544 704a32 32 0 1 1-64 0V320a32 32 0 0 1 64 0v384z"></path>
            </svg>
          </div>
        </div>
        <ul class="shortcut-item-content">
          <li v-for="item in value" :key="item.id">
            <div style="position: relative">
              <img v-if="!isImgLoad"
                   src=""
                   alt="图片不见了">
              <img v-show="isImgLoad"
                   :src="item.icon"
                   alt="图片不见了"
                   @click="openShortcut(item.path,item.type)"
                   @load="isImgLoad = true">
              <div class="shortcut-item-menu">
                <!-- 删除内容 -->
                <svg @click="removeShortcutContent(item.id)" style="width: 12px;fill: #eee;" viewBox="0 0 1024 1024"
                     xmlns="http://www.w3.org/2000/svg">
                  <path
                      d="M798.1 872.6c0 34.3-27.9 62.2-62.1 62.2H288.1c-34.3-0.1-62.1-27.9-62.2-62.2V212.8h572.2v659.8zM350.2 101.2c0-7.2 5.6-12.8 12.8-12.8h298.8c7.2 0 12.7 5.6 12.7 12.8v37.5H350.2v-37.5z m634.3 37.5H748.7v-37.5c0-47.8-39-86.9-86.9-86.9H363c-47.9 0.1-86.8 38.9-86.9 86.9v37.5H39.5C18.7 138.7 2 155.4 2 176.1s16.7 37.5 37.5 37.5H151v659c0 75.7 61.4 137.1 137.1 137.1h447.8c75.7 0 137.1-61.4 137.1-137.1V212.8h111.6c20.7 0 37.5-16.7 37.5-37.5s-16.8-36.6-37.6-36.6zM512 822.4c20.7 0 37.5-16.7 37.5-37.5V386.5c0-20.7-16.7-37.5-37.5-37.5-20.7 0-37.5 16.7-37.5 37.5v398.4c0 20.7 16.8 37.5 37.5 37.5m-174.5 0c20.7 0 37.5-16.7 37.5-37.5V386.5c0-20.7-16.7-37.5-37.5-37.5-20.7 0-37.5 16.7-37.5 37.5v398.4c0.8 20.7 17.6 37.5 37.5 37.5m349 0c20.7 0 37.5-16.7 37.5-37.5V386.5c0-20.7-16.7-37.5-37.5-37.5-20.7 0-37.5 16.7-37.5 37.5v398.4c0.1 20.7 16.8 37.5 37.5 37.5"></path>
                </svg>
                <!-- 编辑内容 -->
                <svg @click="isAddShortcut = true;data = item" style="width: 12px;fill: #eee;" viewBox="0 0 1024 1024"
                     xmlns="http://www.w3.org/2000/svg">
                  <path
                      d="M610 119c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32H234c-34.993 0-63.426 28.084-63.991 62.942L170 247v544c0 34.993 28.084 63.426 62.942 63.991L234 855h544c34.993 0 63.426-28.084 63.991-62.942L842 791V415c0-17.673 14.327-32 32-32 17.673 0 32 14.327 32 32v376c0 70.692-57.308 128-128 128H234c-70.692 0-128-57.308-128-128V247c0-70.692 57.308-128 128-128h376z m286.205 9.627c12.497 12.497 12.497 32.758 0 45.255L505.882 564.205c-12.497 12.497-32.758 12.497-45.255 0-12.496-12.497-12.496-32.758 0-45.255L850.95 128.627c12.497-12.496 32.758-12.496 45.255 0z"></path>
                </svg>
              </div>
            </div>
            <p>{{ item.name }}</p>
          </li>
          <li v-for="count in (4 - (value.length % 4))" :key="count" style="opacity: 0;width: 21%;height: 0;">{{count}}</li>
        </ul>
      </div>
    </div>
    <div v-else style="display: flex;justify-content: space-between;align-items: center;">
      <div>内容为空</div>
      <svg @click="isAddShortcut = true;data = {type: '网址',name: '',path: '',icon: ''}" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#000000">
        <path
            d="M128 64a64 64 0 0 0-64 64v768a64 64 0 0 0 64 64h768a64 64 0 0 0 64-64V128a64 64 0 0 0-64-64H128z m0-64h768a128 128 0 0 1 128 128v768a128 128 0 0 1-128 128H128a128 128 0 0 1-128-128V128a128 128 0 0 1 128-128z"></path>
        <path d="M704 480a32 32 0 1 1 0 64H320a32 32 0 0 1 0-64h384z"></path>
        <path d="M544 704a32 32 0 1 1-64 0V320a32 32 0 0 1 64 0v384z"></path>
      </svg>
    </div>
  </div>
</template>

<script>
import AddShortcut from "./addShortcut.vue";
const {shell} = window.electron;

export default {
  name: "Shortcut",
  components: {
    AddShortcut
  },
  data() {
    return {
      shortcutData: null,
      isAddShortcut: false,
      isImgLoad: false,
      data: {
        type: "文件", 
        name: '', 
        path: '', 
        icon: ''
      }
    }
  },
  created() {
    this.shortcutData = this.getShortcutContent()
  },
  methods: {
    saveShortcutContent(e) {
      e.id ? this.updateShortcutContent(e) : this.addShortcutContent(e);
      this.isAddShortcut = false;
    },
    addShortcutContent(obj) {
      delete obj.id;
      this.db("user").get('shortcuts').insert(obj).write();
      this.shortcutData = this.getShortcutContent();
    },
    removeShortcutContent(id) {
      this.db("user").get('shortcuts').removeById(id).write();
      this.shortcutData = this.getShortcutContent();
    },
    updateShortcutContent(obj) {
      this.db("user").get('shortcuts').updateById(obj.id, obj).write();
      this.shortcutData = this.getShortcutContent();
    },
    getShortcutContent() {
      let list = this.db("user").get('shortcuts').orderBy("type", "desc").groupBy("type").value()
      return Object.keys(list).length == 0 ? null : list;
    },
    openShortcut(path, type) {
      if (type === '文件' || type === '文件夹') {
        shell.openPath(path)
      } else {
        shell.openUrl(path)
      }
    }
  }
}
</script>

<style scoped>
.shortcut-item {
  overflow: hidden;
}

.shortcut-item-top {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.shortcut-item-content {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.shortcut-item-content li {
  box-sizing: border-box;
  width: 21%;
  margin-bottom: 10px;
  text-align: center;
}

.shortcut-item-content img {
  width: 100%;
}

.shortcut-item-menu {
  display: none;
  padding: 4px 2px;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  bottom: 3px;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4)
}

.shortcut-item-content li:hover .shortcut-item-menu {
  display: flex;
}

/*滚动条样式：谷歌浏览器*/
::-webkit-scrollbar {
  height: 0;
  width: 0;
}

</style>